<template>
  <div class="content">
    <div class="warpper ">
      <div class="main">
        <CardHead>
          <template slot="title">碎语</template>
          <template slot="desc">人啊，年纪大了，感想就多了，纪录成长吧</template>
        </CardHead>
        <div class="dmContent">
          <ul v-if="timelineData">
            <li class="time_line" v-for="item in timelineData" :key="item.id">
              <label class="tl_time">{{item.createdAt.split("T")[0]}}</label>
              <label class="tl_content">{{item.title}}</label>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import config from "@/utils/config"
import { Component, Prop, Vue, Emit } from "vue-property-decorator"
@Component({
  head() {
    return {
      title: "碎语",
    };
  },
  async asyncData({ app }) {
    const res = await app.$axios.$get(config.BASE_URL + "/api/line/list");
    return {
      timelineData: res.d,
    };
  },
})
export default class extends Vue {
  timelineData: Array<any> = [1, 2, 3];
  created() {}
}
</script>
<style lang="scss" scoped>
.dmContent {
  margin-top: 20px;
}
.time_line:hover {
  .tl_content,
  .tl_time {
    color: #0b3e67;
    background: rgba(240, 246, 249, 0.38);
  }
}
.time_line {
  height: 4rem;
  line-height: 3rem;
  // background: #f1f7fb69;
  position: relative;
  padding-top: 0.5rem;
  .tl_time {
    width: 20%;
    display: inline-block;
    text-align: right;
    padding-right: 1rem;
    height: 3rem;
  }
  .tl_time:before {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    left: 20%;
    background: #165c94;
    border-radius: 50%;
    top: 50%;
    transform: translate3d(0, -50%, 0);
  }
  .tl_time:after {
    content: "";
    width: 2px;
    height: 100%;
    background: #165c94;
    position: absolute;
    left: 236px;
    top: 0;
  }
  .tl_content {
    height: 3rem;
    display: inline-block;
    padding-left: 1rem;
    width: 70%;
  }
}
</style>
